<div class="control-container">
    <div class="anchor invisible" #anchor [class.cursor-size]="startCharacter" [class.full-size]="!startCharacter">
        <span class="form-control w-100">&nbsp;</span>
    </div>

    @if (textArea) {
        <textarea
            class="form-control"
            [id]="formId"
            #input
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            (blur)="blur()"
            [class.form-empty]="inputStyle === 'empty'"
            [class.form-icon]="!!icon"
            [class.form-underlined]="inputStyle === 'underlined'"
            [formControl]="queryInput"
            (keydown)="onKeyDown($event)"
            (keypress)="editorKeyPress.emit($event)"
            [name]="formName"
            [placeholder]="placeholder"
            rows="2"
            sqxAutosize
            [sqxFocusOnInit]="autoFocus"></textarea>
    } @else {
        <input
            class="form-control"
            [id]="formId"
            #input
            autocapitalize="off"
            autocomplete="off"
            autocorrect="off"
            (blur)="blur()"
            [class.form-empty]="inputStyle === 'empty'"
            [class.form-icon]="!!icon"
            [class.form-underlined]="inputStyle === 'underlined'"
            [formControl]="queryInput"
            (keydown)="onKeyDown($event)"
            (keypress)="editorKeyPress.emit($event)"
            [name]="formName"
            [placeholder]="placeholder"
            [sqxFocusOnInit]="autoFocus" />
    }

    @if (icon) {
        <div class="icon">
            @if (snapshot.isLoading) {
                <sqx-loader color="input" />
            } @else {
                <i class="icon-{{ icon }}"></i>
            }
        </div>
    }

    @if (allowOpen) {
        <div class="btn btn-sm" (click)="openModal()" sqxStopClick><i class="icon-caret-down"></i></div>
    }
    <sqx-dropdown-menu
        class="control-dropdown"
        #container
        adjustHeight="false"
        [adjustWidth]="dropdownFullWidth && !startCharacter"
        [position]="dropdownPosition"
        scrollX="false"
        scrollY="true"
        [sqxAnchoredTo]="anchor"
        *sqxModal="suggestionsModal"
        [style]="dropdownStyles">
        @for (item of snapshot.suggestedItems; track item; let i = $index) {
            <div
                class="control-dropdown-item control-dropdown-item-selectable"
                [class.active]="i === snapshot.suggestedIndex"
                (mousedown)="selectItem(item)"
                (mouseover)="selectIndex(i)"
                [sqxScrollActive]="i === snapshot.suggestedIndex"
                [sqxScrollContainer]="$any(container.nativeElement)">
                @if (!itemTemplate) {
                    {{ item }}
                }

                @if (itemTemplate) {
                    <ng-template [index]="i" [item]="item" [sqxTemplateWrapper]="itemTemplate"></ng-template>
                }
            </div>
        }
    </sqx-dropdown-menu>
</div>
